<template>
    <fieldset>
        <legend>tab切换</legend>
        <button v-for="btn in buttons" :key="btn" :class="['tab-button',{active:btn === selectBtn}]" @click="handleClick(btn)">{{btn}}</button>
        <div class="tab" :is="dynamic">12121</div>
    </fieldset>
</template>

<script>
    import emailCom from "./email-com.vue"
    import homeCom from "./home-com.vue"
    import mineCom from "./mine-com.vue"
    export default {
        data(){
            return {
                buttons:["email","mine","home"],
                selectBtn:"email",
            }
        },
        methods:{
            handleClick(btn){
                // console.log(btn)
                this.selectBtn = btn
            }
        },
        computed:{
            dynamic(){
                return this.selectBtn + "-com"
            }
        },
        components:{
            "email-com":emailCom,
            "mine-com":mineCom,
            "home-com":homeCom,
        }
    }
</script>

<style scoped>

.tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
}

.tab-button:hover {
    background: #e0e0e0;
}

.tab-button.active {
    background: yellowgreen;
}

.tab {
    border: 1px solid #ccc;
    padding: 10px;
}

h1 {
    margin: 0;
}
</style> 